<template>
<div class="declarationElementsVue">

  <h2>申报要素</h2>

  <div class="head">

    <div class="btns clearfix">
      <!-- <el-button class="export" :disabled="!editable" type="primary">导出</el-button> -->
    </div>


    <div class="tcf-table">
      <div class="tcf-table-in">
        <el-row>
          <el-col :span="6">
            <p>序号</p>
          </el-col>
          <el-col :span="6">
            <p>海关编码</p>
          </el-col>
          <el-col :span="12">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_de_hscode" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>1</p>
          </el-col>
          <el-col :span="6">
            <p>品名</p>
          </el-col>
          <el-col :span="12">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_de_product" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>2</p>
          </el-col>
          <el-col :span="6">
            <p>用途</p>
          </el-col>
          <el-col :span="12">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_de_use" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>3</p>
          </el-col>
          <el-col :span="6">
            <p>品牌</p>
          </el-col>
          <el-col :span="12">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_de_brand" placeholder="请输入内容" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <p>4</p>
          </el-col>
          <el-col :span="6">
            <p>型号</p>
          </el-col>
          <el-col :span="12">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="documentprocess_cc_de_description" placeholder="请输入内容" />
          </el-col>
        </el-row>


        <el-row :key="index" v-for="(item, index) in documentprocess_cc_de_def">
          <el-col :span="6">
            <p>{{index + 5}}</p>
          </el-col>
          <el-col :span="6">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="item.name" placeholder="请输入内容" />
          </el-col>
          <el-col :span="12">
            <input type="text" @input="handleSimpleInput" :readonly="!editable"   v-model="item.value" placeholder="请输入内容" />
          </el-col>
        </el-row>
    </div>

    <div class="upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="editable"  name="file" multiple @change="selectFiles" >
          <el-button :disabled="!editable" type="primary">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)" :key="index"   @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>


  </div>


</div>
</div>
</template>

<script>

import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js';
import { handleEmit } from '../common.js'; 

export default {
  created(){
    this.keys.forEach(key => {
      this[key] = _.cloneDeep(this.datas[key]);
    }); 
  },
  methods: {

    /** 
     * 更新数据到单证员报关
    */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });

      this.$emit("fromDE", "documentprocess_cc_declarationElements", obj);
    },

    handleSimpleInput(){
      this.emitToParent();
    },
    specialInitialProcess() {
      let dom = document.querySelector('.initiatingprocess .routers-ctrl');
      if (dom) {
        dom.style.zIndex = '0';
      }
    },
    selectFiles(event){
      //票据附件
      let self = this;
      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });
        self.emitToParent();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },

  },
  data() {
    return {
        id: '',
        formInstId: '',
        attachedFiles: [], //附件
        documentprocess_cc_de_hscode: '', //海关编码
        documentprocess_cc_de_product: '', //产品
        documentprocess_cc_de_use: '', //用途
        documentprocess_cc_de_brand: '', //品牌
        documentprocess_cc_de_description: '', //型号

        //自定义的字段
        documentprocess_cc_de_def: [
          {
            name: '',
            value: ''
          }, {
            name: '',
            value: ''
          }, {
            name: '',
            value: ''
          }, {
            name: '',
            value: ''
          }, {
            name: '',
            value: ''
          }, {
            name: '',
            value: ''
          }
        ],
        keys: [
          "id",
          "formInstId",
          "attachedFiles",
          "documentprocess_cc_de_hscode",
          "documentprocess_cc_de_product",
          "documentprocess_cc_de_use",
          "documentprocess_cc_de_brand",
          "documentprocess_cc_de_description",
          "documentprocess_cc_de_def"
        ]
    }
  },
  watch: {
    datas(newValue, oldValue){
      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      requried: true
    }
  },
  components: {}
}
</script>

<style lang="scss" >
.declarationElementsVue {

    padding: 20px;
    border: 1px solid #999;

    font-size: 14px;


    > h2 {
        text-align: center;
    }

    a {
        color: #409EFF;
    }
    .el-table {
        margin-bottom: 20px;
    }

    .head {
        .btns {
            width: 100%;
            height: 40px;
            text-align: center;
            .export {
                float: right;
            }
        }

        .tcf-table {
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;

            input {
              width: 90%;
              height: 36px;
              border: none;
              outline: none;
              background-color: transparent;
            }

            .el-input__inner {
              border: none;
            }
            h2 {
                text-align: center;
                padding: 10px 0;
            }
            .-null {
                height: 40px;
            }
            .tcf-table-title {
                text-align: center;
            }
            .tcf-table-in {
                border-top: 1px solid #999;
                .el-row {
                    box-sizing: border-box;
                    border-bottom: 1px solid #999;
                    border-left: 1px solid #999;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border-right: 1px solid #999;
                    padding: 5px;
                }
            }
            .el-table {
                margin-top: 10px;
            }
            .el-select {
                width: 100%;
            }
            .-el-col {
                padding: 0 !important;
            }
            .bill-of-lading-project-requires-p {
                height: 392px;
            }
            .special-provisions {
                height: 351px;
            }
            .bill-of-lading-project-requires {
                width: 100%;
                border-bottom: 1px solid #999;
                box-sizing: border-box;
                .el-row {
                    box-sizing: border-box;
                    border: none;
                }
                .el-col {
                    text-align: center;
                    line-height: 40px;
                    box-sizing: border-box;
                    border: none;
                }
                .el-col-20 {
                    text-align: left;
                    text-indent: 20px;
                }
                .-el-col {
                    padding: 5px !important;
                    text-indent: 0;
                }
            }
            .-bill-of-lading-project-requires {
                border-bottom: none;
            }
            .sea-freight {
                .el-col {
                    text-align: center;
                    height: 90px;
                    line-height: 90px;
                    box-sizing: border-box;
                }
                .sea-freight-col {
                    line-height: 41px;
                    padding-top: 3px;
                }
            }
            .no-border {
                //   border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

        }

        .upload {

          margin-top: 20px;

          >div {
            border: 1px solid #999;
            padding: 20px 0px 40px 20px;
          }

          .upload-btn {
            position: relative;
            >input {
              opacity: 0;
              width: 100px;
              height: 40px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }

          .upload-files {

              > li {
                  width: 300px;
                  padding: 10px 0;
                  transition: all 0.5s linear;

                  &:hover {

                    >span {
                      color: #409EFF;
                    }
                  }
                }

              font-size: 16px;
              span {
                  padding: 0 10px;
                  cursor: pointer;
                  display: inline;
              }
              span.el-icon-close:hover {
                  cursor: pointer;
              }
          }
          .upload-hint {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }

    }
}
</style>
